<template>
	<div class="log">
		<img src="../assets/img/text1.png" alt="" />
		<h1>快取</h1>
		<p style="font-size: 16px;">欢迎登陆快取</p>
		<p style="width: 200px;margin-left: auto;margin-right: auto;">
			<input type="text" class="form-control" placeholder="用户名" v-model="phone"></p>
		<p style="width: 200px;margin-left: auto;margin-right: auto;">
			<input type="password" class="form-control" placeholder="密码" v-model="psd" /></p>
		<button type="button" class="btn btn-pencil" @click="logined" style="background: #FFD700">登录</button>
		<footer >
			<div class="container">
				<router-link to="/register">
					<p style="font-size: 15px;position:fixed;right: 50px;bottom:80px; color: #000000;">用户注册</p>
				</router-link>
			</div>
			<p style="font-size: 12px; position:fixed; bottom: 10px;margin-left: 20px;">
				登陆代表同意快取用户协议，隐私政策,并授权使用您的账号信息</p>
		</footer>
	</div>
</template>

<script>
	import {
		Toast
	} from 'mint-ui';
	export default {
		name: 'login',
		data() {
			return {
				phone: '',
				psd: '',
				userphone: '',
				userpwsd: '',
			}
		},
		methods: {
			logined() {
				if (this.phone != this.userphone && this.userphone != "") {
					Toast("无效手机号");
				} else if (this.userphone == "") {
					Toast("用户不存在，请先注册");
				} else if (this.psd != this.userpwsd || this.psd == "") {
					Toast("密码错误");
				} else if (this.phone == this.userphone && this.psd == this.userpwsd) {
					Toast("登录成功");
					var obj = {
						userphone: this.phone,
						userpwsd: this.psd,
						logged: true
					};
					window.localStorage.setItem("key", JSON.stringify(obj));
					this.$router.push({
						name: "homePage"
					});
				}
			},
		},
		mounted() {
			var getdata = JSON.parse(window.localStorage.getItem("key"))
			this.userphone = getdata.userphone;
			this.userpwsd = getdata.userpwsd;
		},
	}
</script>

<style scoped="scoped">
	.log {
		margin-top: 60px;
		text-align: center;
	}
</style>
